<template>
  <div :class="$style.container">
    <el-card 
      :class="$style.card" 
    >
      <h4>商品信息</h4>
      <ul :class="$style.list">
        <li 
          v-for="item in carts" 
          :key="item.doubanId">
          <img v-lazy="item.film.coverurl">
          <div :class="$style.right">
            <span>￥{{ item.film.price }}</span>
          </div>
          <div :class="$style.center">
            <p>[ {{ item.film.genres.join('、') }} ]</p>
            <p>{{ item.film.original_title }}</p>
            <p>{{ item.film.collect_count }} 人看过这部电影, {{ item.film.wish_count }} 人想看</p>
          </div>
        </li>
      </ul>
      <div :class="$style.bottom">
        <div :class="$style.item">
          <span 
            v-if="carts && carts.length" 
            :class="$style.left">共{{ carts.length }}件商品，商品总金额：</span>
          <span :class="$style.right">￥{{ total }} </span>
        </div>
        <div :class="$style.item">
          <span :class="$style.left">应付：</span>
          <span :class="[$style.right,$style.price]">￥{{ total }}</span>
        </div>
        <div :class="$style.item">
          <span/>
          <span 
            v-if="carts.length > 0" 
            :class="$style.info">购买账号：{{ carts[0].username }}</span>
        </div>
        <div :class="$style.item">
          <el-button 
            round 
            @click.stop="handleSubmitClick">提交订单</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import http from '../APIService/http'
import * as math from 'mathjs'
export default {
  data() {
    return {
      carts: [],
      user: {},
      orderId: ''
    }
  },
  computed: {
    total() {
      let totalMoney = 0
      this.carts.forEach(item => {
        totalMoney = math.add(totalMoney, item.film.price)
      })
      return totalMoney
    }
  },
  async asyncData(ctx) {
    try {
      let params = {
        token: ctx.app.$cookiz.get(ctx.app.$api.token)
      }
      let res = await http.get(`/cart/getMyCart`, params)
      if (res.code === 0) {
        return {
          carts: res.data
        }
      }
    } catch (err) {
      console.log(`get cart fail:`, err)
    }
  },
  methods: {
    async handleSubmitClick() {
      let ids = this.carts.map(item => item._id)
      let params = {
        ids,
        token: this.$store.state.app.cookie,
        price: this.total,
        cartId: ''
      }
      let res = await http.post(`/order/createOrder`, params)
      if (res.code === 0) {
        this.$router.push({
          path: '/cashier',
          query: {
            id: res.data.orderId
          }
        })
      }
    }
  }
}
</script>

<style lang='scss' module>
.container {
  .card {
    margin: 50px 0px;
    padding-top: 0px;
    h4 {
      margin-left: 12px;
      color: #07111b;
      font-size: 16px;
      line-height: 60px;
    }
    .list {
      padding-bottom: 36px;
      li {
        margin-bottom: 1px;
        padding: 24px;
        box-sizing: border-box;
        height: 138px;
        background: #f3f5f7;
        &:after {
          display: block;
          content: ' ';
          overflow: hidden;
          clear: both;
        }
        img {
          margin-right: 24px;
          float: left;
          width: 160px;
          height: 90px;
          object-fit: cover;
        }
        .right {
          float: right;
          width: 286px;
          line-height: 90px;
          text-align: left;
          font-size: 16px;
          color: #f01414;
        }
        .center {
          p {
            &:nth-child(1) {
              margin-top: 8px;
              font-size: 12px;
              color: #07111b;
              line-height: 24px;
            }
            &:nth-child(2) {
              font-size: 16px;
              color: #07111b;
              line-height: 24px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            &:nth-child(3) {
              font-size: 14px;
              color: #f20d0d;
              line-height: 24px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }
    }
    .bottom {
      text-align: right;
      padding-top: 10px;
      padding-bottom: 36px;
      border-top: 1px solid #d9dde1;
      .item {
        line-height: 40px;
        .left {
          margin-right: 50px;
          width: 400px;
          text-align: right;
          font-size: 14px;
          color: #07111b;
          line-height: 14px;
        }
        .right {
          font-size: 14px;
          line-height: 14px;
          color: #07111b;
        }
        .price {
          color: #f01414;
          font-size: 24px;
          font-weight: bold;
          line-height: 24px;
        }
        .info {
          font-size: 12px;
          color: #93999f;
          line-height: 24px;
          margin-bottom: 20px;
          margin-top: 15px;
        }
        button {
          background: #f50200;
          color: #fff;
          &:hover,
          &:visited,
          &:focus {
            border-color: #f50200;
          }
        }
      }
    }
  }
}
</style>
